<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>





    </style>
</head>

<body>
    <div id="app">
        <div v-for="item in items">
            <my-component :param=item></my-component>
        </div>

    </div>


    <!-- <div id="plugin"></div> -->

    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        //vue 有一个components数组 注册一大堆component  标识符（名字）
        //  Vue.component('my-component', {
        //     props: ["param"],
        //       template: "<div>{{param}}</div>"
        //  })

        // $("#plugin").plugin({})

        var vm = new Vue({
            el: "#app",
            data: {
                items: [
                    "第一行", "第二行", "第三行", "第四行", "第五行"

                ]
            },
            components: {
                'my-component': {
                    props: ["param"],
                    template: "<div>{{param}}</div>"
                }
            }
        })
    </script>
</body>

</html>